<template>
  <div class="home_banner">
    <div class="swiper">
      <Swiper class="swiper-wrapper">
        <SwiperItem
          v-for="item in bannerList"
          :key="item.id"
          class="swiper-slide"
          @click="handleClick(item)"
        >
          <div class="carousel__item" v-click-move>
            <NuxtImg :src="item.img" />
          </div>
        </SwiperItem>
      </Swiper>
    </div>
  </div>
</template>

<script setup lang="ts">
const userStore = useUserStore();
const bannerList: any = reactive([
  {
    id: 1,
    img: "/images/home/banner/1.png",
    routeName: "activity-clipdoll",
  },
  {
    id: 2,
    img: "/images/home/banner/2.png",
    callBack() {
      userStore.changeShowCarteira(true);
    },
  },
  {
    id: 3,
    img: "/images/home/banner/3.png",
    routeName: "activity-vip",
  },
  {
    id: 4,
    img: "/images/home/banner/4.png",
    routeName: "activity-tesouro",
  },
  {
    id: 5,
    img: "/images/home/banner/5.png",
    routeName: "ranking-treasure-chest",
  },
]);

function handleClick(item: any) {
  // 未登录
  if (!userStore.isLogin) {
    userStore.changeShowLogin(true);
    return;
  }

  // 自定义回调
  if (item.callBack) {
    item.callBack();
    return;
  }

  // 路由跳转
  if (item.routeName) {
    navigateTo({ name: item.routeName });
    return;
  }
}
</script>

<style scoped lang="scss">
.home_banner {
  position: relative;
  margin-top: 0.1rem;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 4rem; // 只保留一个height属性
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;
  transform: translateZ(0); // 合并transform属性
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.carousel__item {
  width: 9.46rem; // 只保留一个width属性
  height: 4rem;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius: 0.22rem;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
